<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心 ❤️</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #ffdde1 100%);
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .heart-tag {
            position: fixed;
            background: linear-gradient(135deg, #ff6b9d, #c73866);
            color: white;
            padding: 14px 26px;
            border-radius: 30px;
            font-size: 15px;
            font-weight: 700;
            box-shadow:
                    0 10px 25px rgba(255, 107, 157, 0.4),
                    0 6px 12px rgba(0, 0, 0, 0.3),
                    inset 0 2px 0 rgba(255, 255, 255, 0.4),
                    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
            opacity: 0;
            white-space: nowrap;
            transform-origin: center;
            will-change: transform, left, top, opacity;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
<script>
    // 爱心的形状坐标（使用参数方程生成）
    function getHeartPoints(scale = 1, offsetX = 0, offsetY = 0) {
        const points = [];
        const numPoints = 60; // 增加点数让爱心更完美

        for (let i = 0; i < numPoints; i++) {
            const t = (i / numPoints) * 2 * Math.PI;
            const x = 16 * Math.pow(Math.sin(t), 3);
            const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));

            points.push({
                x: x * scale + offsetX,
                y: y * scale + offsetY
            });
        }

        return points;
    }

    // 获取屏幕中心位置
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;

    // 生成爱心坐标点 - 增大半径
    const heartPoints = getHeartPoints(23, centerX, centerY);

    // 从顶部按顺序飞入
    function getOrderedStartPosition(index, total) {
        // 按照索引在顶部从左到右排列
        const progress = index / total;
        const x = window.innerWidth * progress;
        const y = -150;

        return { x, y };
    }

    // 多彩的渐变色方案 - 更梦幻的配色
    const colorSchemes = [
        'linear-gradient(135deg, #ff6b9d 0%, #c73866 100%)',
        'linear-gradient(135deg, #ffa07a 0%, #ff6b9d 100%)',
        'linear-gradient(135deg, #ff69b4 0%, #ff1493 100%)',
        'linear-gradient(135deg, #ff85c1 0%, #d946a6 100%)',
        'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
        'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)',
        'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
        'linear-gradient(135deg, #fa8bff 0%, #2bd2ff 50%, #2bff88 100%)',
        'linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #ffc3a0 100%)',
        'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
        'linear-gradient(135deg, #ff6a88 0%, #ff99ac 100%)',
        'linear-gradient(135deg, #f5576c 0%, #f093fb 100%)'
    ];

    // 创建标签，实现规律的动画效果
    function createTag(text, targetPos, index, total) {
        const tag = document.createElement('div');
        tag.className = 'heart-tag';
        tag.textContent = text;

        // 随机选择颜色
        const randomColor = colorSchemes[Math.floor(Math.random() * colorSchemes.length)];
        tag.style.background = randomColor;

        // 从顶部按顺序开始
        const startPos = getOrderedStartPosition(index, total);
        tag.style.left = startPos.x + 'px';
        tag.style.top = startPos.y + 'px';

        document.body.appendChild(tag);

        // 阶段1：匀速飞入到目标点附近（延迟增加，动画变慢）
        setTimeout(() => {
            tag.style.opacity = '1';
            tag.style.transition = 'left 1.5s ease-out, top 1.5s ease-out, transform 1.5s ease-out';

            // 直接飞向目标点附近，稍微飞过一点
            const overshootX = targetPos.x + (Math.random() - 0.5) * 50;
            const overshootY = targetPos.y + (Math.random() - 0.5) * 50;

            tag.style.left = overshootX + 'px';
            tag.style.top = overshootY + 'px';
            tag.style.transform = `scale(1.1) rotate(${(Math.random() - 0.5) * 20}deg)`;
        }, index * 80); // 延迟从30ms增加到80ms

        // 阶段2：轻微调整位置（1500-3000ms）
        setTimeout(() => {
            tag.style.transition = 'left 1.5s cubic-bezier(0.34, 1.56, 0.64, 1), top 1.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 1.5s ease-in-out';

            // 小幅度随机偏移
            const randomX = targetPos.x + (Math.random() - 0.5) * 80;
            const randomY = targetPos.y + (Math.random() - 0.5) * 80;

            tag.style.left = randomX + 'px';
            tag.style.top = randomY + 'px';
            tag.style.transform = `scale(${0.95 + Math.random() * 0.1}) rotate(${(Math.random() - 0.5) * 15}deg)`;
        }, index * 80 + 1500);

        // 阶段3：归位到精确位置（3000-5500ms）
        setTimeout(() => {
            tag.style.transition = 'left 2.5s cubic-bezier(0.34, 1.56, 0.64, 1), top 2.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 2.5s cubic-bezier(0.34, 1.56, 0.64, 1)';

            tag.style.left = targetPos.x + 'px';
            tag.style.top = targetPos.y + 'px';
            tag.style.transform = 'scale(1) rotate(0deg)';
        }, index * 80 + 3000);

        // 阶段4：稳定后添加轻微浮动（5500ms后）
        setTimeout(() => {
            tag.style.transition = 'transform 3s ease-in-out';

            // 持续浮动动画 - 更慢更优雅
            setInterval(() => {
                const floatY = Math.sin(Date.now() / 1500 + index) * 4;
                const floatX = Math.cos(Date.now() / 2000 + index) * 3;
                const rotation = Math.sin(Date.now() / 2500 + index) * 2;
                tag.style.transform = `translate(${floatX}px, ${floatY}px) rotate(${rotation}deg) scale(1)`;
            }, 50);
        }, index * 80 + 5500);
    }

    // 表白文字
    const messages = [
        '你很温柔', '你很善良', '你很可爱', '你很美丽',
        '你的笑容很迷人', '你的眼睛会说话', '你很体贴',
        '喜欢你的一切', '想永远陪着你', '余生都是你',
        '遇见你真好', '你是我的全世界', '只想对你好',
        '每天都想见到你', '你让我心动', '为你心动不已',
        '你是我的唯一', '爱你一万年', '此生不负你',
        '想把最好的都给你', '你是我的小幸运', '有你就够了',
        '你笑起来真美', '我的心都是你的', '想和你在一起',
        '你真的很优秀', '你让我变更好', '因为是你啊',
        '世界因你而美好', '你值得最好的', '永远爱你',
        '你是我的宝贝', '守护你一辈子', '陪你看日落',
        '想给你全世界', '与你相伴', '❤️', '💕', '💖', '💗', '💓'
    ];

    // 随机打乱
    function shuffleArray(array) {
        const newArray = [...array];
        for (let i = newArray.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
        }
        return newArray;
    }

    const shuffledMessages = shuffleArray(messages);

    // 创建所有标签
    heartPoints.forEach((point, index) => {
        const messageIndex = index % shuffledMessages.length;
        const message = shuffledMessages[messageIndex];
        createTag(message, point, index, heartPoints.length);
    });
</script>
</body>
</html>
